<template>
  <div id="app">
   <!--
      router-link 和 router-view  => VueRouter中定义的内置组件
      
      router-link => 用于做当前跳转  to => 跳转的路由地址(不同的路由渲染不同的页面)
    
      <router-view/> => 基于component动态组件封装实现的 => 对应路由地址/名称 -> 将对应的组件渲染到router-view中
    -->
    <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </nav>
    <router-view/>
  </div>
</template>

<script>
  // 单页面应用: 只有一个根应用 (所有的组件(应用)都是在此根应用中显示的)
  // 单文件组件: =>  webpack会将文件解析为组件 (视图相关的组件 => 配合路由展示/页面布局  可复用的组件 => 存在components中 在其他view/components中使用 )

  // webpack前端工程化工具
  // 项目开发过程中  => 对项目的文件做批量处理 => 自己处理太麻烦 =>  借助工程化工具(官方会帮我们处理)
  
  // html css js 压缩
  // es6转es5
  // sass 转 css
  // 以模块化语法引入 css js .vue json文件  (官方会帮我们处理)

  // .vue  => 单文件组件 => 每一个.vue件都是一个组件(html style script)  (基于webpack前端工程化工具搭建 -> 解析.vue文件 -> 分离成结构 样式 和 JS)

  // 局部组件
  // let App = {
  //     template:`<template>
  //     <div id="app">
  //       <nav>
  //         <router-link to="/">Home</router-link> |
  //         <router-link to="/about">About</router-link>
  //       </nav>
  //       <router-view/>
  //     </div>
  //   </template>
  // `
  // }

  // export default app



</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>
